<template>
    {{#if page.psSysPFPlugin}}
    {{> @macro/plugins/view/view-use.hbs appPlugin=page.psSysPFPlugin}}
    {{else}}
    {{#if page.psViewLayoutPanel.useDefaultLayout}}
    <AppViewLayout :class="classNames">
        <template v-if="!noViewCaption && model.showCaption" #viewHeaderCenter>
            <div class="view-header__center__caption">
                {{> @macro/view/view-caption.hbs}}
            </div>
        </template>
        {{> @macro/view/view-toolbar.hbs page=page}}
        <template #viewContentTop>
        {{#if page.enableQuickSearch}}
            <div class="view-header__quicksearch">
                {{> @macro/common/quick-search.hbs page=page}}
            </div>
        {{/if}}
        {{#each page.ctrls as | ctrl |}}
        {{#eq ctrl.controlType 'SEARCHFORM'}}
            {{> @macro/widgets/form-detail/search-form.hbs ctrl=ctrl}}
            
        {{/eq}}
        {{/each}}
        {{#and page.enableQuickGroup page.quickGroupPSCodeList}}
            <div class="view-header__quickgroup">
                {{> @macro/common/quick-group.hbs}}
            </div>
        {{/and}}
        </template>
        {{#each page.ctrls as | ctrl |}}
        {{#eq ctrl.controlType 'MOBMDCTRL'}}
        <template #default>
            {{> @macro/widgets/mob-mdctrl-detail/mob-mdctrl.hbs ctrl=ctrl}}
        </template>
        {{/eq}}
        {{/each}}
        {{> @macro/view/view-msg.hbs}}  
    </AppViewLayout>
    {{else}}
    <div :class="classNames">
        {{#if page.psViewLayoutPanel.rootPSPanelItems}}
        {{#each page.psViewLayoutPanel.rootPSPanelItems as | panelItem |}}
        {{> @macro/widgets/panel-detail/include-panel.hbs type=panelItem.itemType item=panelItem isMultiData=false panel=page.psViewLayoutPanel page=page}}
        {{/each}}
        {{/if}}
    </div>
    {{/if}}
    {{/if}}
</template>

<script lang="ts" setup>
{{#if page.psViewLayoutPanel.useDefaultLayout}}
import { AppViewLayout } from "@components/layout/view-layout";
{{> @macro/widgets/ctrl/import-ctrl.hbs ctrls=page.ctrls}}
{{else}}
import { AppCtrlPos, AppScrollContainer, AppSimpleFlexContainer, AppStandardContainer, AppTabPanel, AppTabPage } from '@components/layout-element/structure';
{{#if page.psViewLayoutPanel.viewProxyMode}}
{{> @macro/widgets/ctrl/import-ctrl.hbs ctrls=page.psViewLayoutPanel.psControls}}
{{else}}
{{> @macro/widgets/ctrl/import-ctrl.hbs ctrls=page.ctrls}}
{{/if}}
{{/if}}
import { model } from "./{{spinalCase page.codeName}}-model";
import { 
    useNavParamsBind, 
    useEventBind, 
    handleComponentAction,
{{#and page.enableQuickGroup page.quickGroupPSCodeList}}
  handleQuickGroupValueChange,
{{/and}}
{{#if page.enableQuickSearch}}
  handleQuickSearch,
{{/if}}
{{#page.ctrls}}
  {{#eq controlType 'TOOLBAR'}}
    handleToolbarItemClick,
  {{/eq}}
{{/page.ctrls}}
    handleCtrlAction, 
    handleCtrlInit, 
    handleCtrlDestroy, 
    getViewBackVisible,
    getViewClassNames } from "@/hooks/use-view";
import { MDViewActionType, IContext, IParam, IMDViewAbility, IMDViewControllerParams, IMDViewStore, MDViewController, IMDViewController, ILoadingHelper } from '@/core';

{{> @macro/view/view-props.hbs}}

{{> @macro/common/emit.hbs name="view" actionType="MDViewActionType" ability="IMDViewAbility"}}

{{> @macro/view/view-common.hbs}}

const params: IMDViewControllerParams<MDViewActionType, IMDViewAbility> = {
    model,
    evt,
    isLoadDefault: props.isLoadDefault,
    openType: props.openType,
    pLoadingHelper: props.pLoadingHelper,
    handler: (data: IMDViewStore) => { return reactive(data)}
};

{{> @macro/common/controller.hbs name="view" IController="IMDViewController" store="IMDViewStore" ability="IMDViewAbility" controller="MDViewController"}}
</script>
